
@extends('common.header')

<!-- 1. 添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}">  
<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<script type="text/javascript">
	
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	// 获取 token
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	
	// 显示错误
	function showerror(info)
	{
		$(".err_edit").html('');
		$(".err_edit").html(info);
		$(".err_edit").slideDown();
		setTimeout(function(){
			$(".err_edit").slideUp();
		},2000)
	}
	
	// 获取父类相对应的子类列表 
	// 参数：id值 id = 'category_1'
	var i=2;
	function getSonCategory( id ){
		// 将当前下拉框 以下的其他下拉框 全部清除
		$("#"+id).nextAll().remove();
		// 获取当前选择的分类id		
		var category_id	=	$("#"+id).val();	
		// 0代表根类 没有选择子类 
		if( category_id==0 ){					
			return false;
		}
		// 按'_'分割 获取字母部分 category
		var arr=id.split('_'); 	
		// 给 下一级 下拉框 新的id名( category_2 )
		var new_id= arr[0]+'_'+i;	
		// 获取相对应的子类列表 
		$.ajax({
			type:"post",
			url:"{{ url('/category/getSonCategory') }}",
			data:{category_id:category_id,new_id:new_id,_token:_token},
			async:false,    						
			dataType:"html",
			success:function(back){
				if( back!='' ){
					// 同辈后追加
					$('#'+id).after(back);
					i++;
				}
			}
		});
	}
	
	
	
	$(function(){ 
		
		// 一进入页面就找一级分类下的子分类
		getSonCategory('category_1');
		
		// 上传图片按钮 文件名显示
		$("#upFiles").on("change", function(){
			var str = '';
			$("#fileName").html(str);
			// 清空展示区域
			$(".picShow").html(str);
			// 原生js
			var obj = document.getElementById("upFiles");
			// 获取文件个数
			var length = obj.files.length;
			for( var i=0;i<length;i++ ){
				// 获取文件名
				var tempName = obj.files[i].name;
				str += tempName + "\n";
			}
			// 预览图片
			$("#fileName").append(str);
		});	
		
		
		
	});
		
		
</script>
<body>

<br/>
<br/>
<br/>
<br/>
<br/>


<div class="col-xs-6 col-md-1">
</div>

<!-- 页面标记  -->
<div class="col-xs-6 col-md-1" style="color:#32CD32;font-size:25px;">
	{{ $title or '' }}
</div>
<div class="err_edit" style="display:block;"></div>
<div class="col-xs-12 col-sm-6 col-md-8">
		<!-- 添加 相册 表单  -->
		
		<!-- 选择分类 -->
		<div  class="form-group">
			<label class="col-sm-2 control-label">相册分类</label>
			<div class="col-sm-10">
				<!-- 编辑 相册 -->
				@if( isset($photo_info->id) )
					
					<!-- 遍历所有层级 依次选中 例:1,2,3,4 
					$category_info
					1 => array:2 [▼
						"category_name" => "汽车"
						"id" => 1
					  ] -->
					@forelse( $category_path as $key => $category_info )
						<!-- 第一个分类下拉框 -->
						@if( $key==1 )
							<select style="width:auto;float:left;" class="form-control" id="category_{{ $key }}"

                                    ('category_{{ $key }}');" disabled  >
								@if( $category_info['id'] == $category->id )
									<!--第一级分类先选中 -->
									<option value="{{ $category->id }}" selected >
										{{ $category->name }}
									</option>
								@else
								@endif
							</select>
						@else
						<!-- 第二个及以后分类下拉框 -->
						<script type='text/javascript'>
							$(function(){
								var id = {{ $key }};
								var cid = {{ $category_info['id'] }};
								// ajax必须同步才可以选中 异步会选不中
								$( "#category_"+id ).val(cid);
								getSonCategory("category_"+id);
							}); 
						</script>
						@endif
					@empty
					@endforelse
				
				@else
					<!-- 创建 相册 -->
					<select style="width:auto;float:left;" class="form-control" id="category_1" onchange="getSonCategory('category_1');" disabled  >
						<option value="{{ $category->id }}"  >{{ $category->name }}</option>
					</select>
				@endif
			</div>
		</div>
		
		
		<br/><br/>
		<!--添加多张图片 -->
		<div  class="form-group">
			<label class="col-sm-2 control-label">添加图片</label>
			<div class="col-sm-10" style="background:url({{ asset('/images/login/upload.jpg')}} );background-size:50px;width:50px;height:50px;margin-left:15px;border-radius:360px;">
				<input type="file" style="width:50px;height:50px; margin-left:-15px;opacity:0;cursor:pointer;"  name="imgs" id="upFiles" accept="image/gif, image/jpeg, image/png"  multiple />
			</div>
			<div style="float:left;width:200px;height:auto;word-wrap: break-word;margin-left:10px;" id="fileName">
			</div>
		</div>
		
		
		
		<!-- 图片展示区域 -->
		@if( isset($pics_info) )
		<br/><br/><br/><br/>
		<div class="picShow" style='margin-left:19%;width:850px;'  >
			@forelse( $pics_info as $pic )
				<img style='width:300px;margin-right:10%;margin-bottom:30px;border-radius:5px;' src="{{ $pic['pic_url'] }}" />
			@empty
			@endforelse
		</div>
		@else
			<br/><br/><br/>
		@endif

		
		<!-- 标题 -->
		<div  class="form-group">
			<label class="col-sm-2 control-label">标题</label>
			<div class="col-sm-10">
				<input style="width:300px;" type="text" name="title" value="{{ $photo_info->title or '' }}" class="form-control"  placeholder="标题">
			</div>
		</div>
		
		<br/><br/>
		<!-- 信息来源 -->
		<div  class="form-group">
			<label class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10">
				<input style="width:300px;" type="text" name="from" value="{{ $photo_info->from or '' }}" class="form-control"  placeholder="来源">
			</div>
		</div>
		
		
		
		<br/><br/>
		<!-- 描述 -->
		<div  class="form-group">
		  <label class="col-sm-2 control-label">描述</label>
		  <div class="col-sm-10">
			<textarea name="desc" style='height:130px;width:300px;resize:none;' class="form-control" >{{ $photo_info->desc or '' }}</textarea>
		  </div>
		</div>
		
		
		<br/><br/><br/>

		<!-- 1. 模态框 不要动 -->
		@if( isset($photo_info) )
			<button  style="width:300px;margin-left:5%;margin-top:2%;" data-toggle="modal" data-target=".bs-example-modal-sm" class="btn btn-danger">编辑</button>
		@else 
			<button  style="width:300px;margin-left:5%;margin-top:2%;" data-toggle="modal" data-target=".bs-example-modal-sm" class="btn btn-danger">新增</button>
		@endif

		<div  class="form-group" style="margin-top:1%;margin-bottom:10%;">
			<a href="javascript:history.back();" style="width:300px;margin-left:5%;" class="btn btn-success">
				返回
			</a>
		</div>
		
		<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
			<div class="modal-dialog modal-sm" role="document" id='show_info'  style="margin-top:80px;margin-left:50%;color:white;font-size:20px;">
			</div>
		</div>
	
</div>
<div class="col-xs-6 col-md-2">
</div>	
	
	
	


<div id="photo" photoid="{{ $photo_info->id or '' }}" ></div>

<script type="text/javascript">
		
	// 获取 token
	var _token = $('meta[name="csrf-token"]').attr('content');
	$(function(){
		
		// 相册 编辑时 获取 photoid
		var photoid = $("#photo").attr('photoid');
		
		// 执行 创建 编辑 相册
		$("button").click(function(){
			
			// 声明 表单对象
			var formData = new FormData();
			
			// token
			formData.append("_token",_token);
			
			// 获取 文件个数
			var length = $("#upFiles")[0].files.length;
			for( var i=0;i<length;i++ ){
				// 必须写这个 控制器才能获取到文件内容
				// 分别获取 每个文件信息
				formData.append( "file"+i,$("#upFiles")[0].files[i] );
			}
			
			// 定义 接收分类数组
			var category = [];	
			// 定义下标 
			var num=1;	
			// 获取每个下拉框的选中值			
			$("select option:selected").each(function(){
				var category_id= $(this).val();
				// 栏目分类
				category[num] = parseInt(category_id);
				num++;
				
			});	
			num=1;
			formData.append("category",category);
			
			// 标题
			var title	=	$("input[name='title']").val();
			formData.append("title",title);
			
			// 来源
			var from	=	$("input[name='from']").val();
			formData.append("from",from);
			
			// 描述
			var desc	=	$("textarea[name='desc']").val();
			formData.append("desc",desc);
			
			
			if( photoid )
			{
				// 编辑
				var url = "{{ url('/photos/doCreate') }}"+'/'+photoid;
			}else
			{
				// 创建
				var url = "{{ url('/photos/doCreate') }}";
			}
			
			$.ajax({ 
				type : 'post', 
				url  : url, 
				data : formData, 
				async:true,    					
				dataType:"json",
				// 告诉jQuery不要去处理发送的数据
				processData : false, 
				// 告诉jQuery不要去设置Content-Type请求头
				contentType : false,
				beforeSend:function(){
					console.log("正在进行，请稍候");
				},
				success : function(back) { 
					// 2.模态框 不要动
					$('#show_info').html( '' );
					$('#show_info').html( back['show_info'] );
					if( back['show_info']=='图片修改成功' ||  back['show_info']=='修改成功' || back['show_info']=='相册添加成功' )
					{
						setTimeout(function(){
							location.href="{{ url('/photos') }}";
						}, 1000); 
						
					}
					
				}
			});
			
		});
	});

</script>
</body>
@extends('common.footer')